<template>
  <item-title title="基本信息" />

  <el-form
    label-position="right"
    label-width="120px"
    :inline="true"
    class="form-detail"
  >

    <el-row
      :gutter="20"
      style="width:100%"
    >

      <el-col :span="8">
        <el-form-item label="产品通用名：">
          {{ datas.planDetail?.productPopularName }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="商品名：">
          {{ datas.planDetail?.productName }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="包装规格：">
          {{ datas.planDetail?.packSpecs }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="生产厂家：">
          {{ datas.planDetail?.producer }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="招商类型：">
          <span>{{ getLabel('plan_type', datas.planDetail?.detailPlanType) }}</span>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="规划招商地区：">
          {{ datas.planDetail?.areaName ? datas.planDetail?.cityName + "/" + datas.planDetail?.areaName : datas.planDetail?.cityName ? datas.planDetail?.cityName : datas.planDetail?.provinceName }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="代理周期：">
          <span>{{ datas.planDetail?.agentCycle }}年</span>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="最低销量：">
          <span v-if="datas.planDetail?.isIncrease == 1">{{ datas.planDetail?.minSale }}{{ getLabel('sell_unit',datas.planDetail?.sellUnit) }}/年</span>
          <span v-else-if="datas.planDetail?.isIncrease == 2">首年{{ datas.planDetail?.minSale }}{{ getLabel('sell_unit',datas.planDetail?.sellUnit) }},每年递增{{ datas.planDetail?.increaseNum }}%</span>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="销量保证金：">
          <span v-if="datas.planDetail?.sellEarnestMoney">{{ datas.planDetail?.sellEarnestMoney }}元</span>
          <span v-else>未设置</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="其他说明：">
          <span v-if="datas.planDetail?.remark">{{ datas.planDetail?.remark }}</span>
          <span v-else>无</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="市场准入信息：">
          <my-tooltip
            v-if="datas.planInfo?.chanceId"
            :content="datas.planInfo?.chanceName"
            @click="toChance"
          />
          <span v-else>无</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="规划结束日期：">
          {{ dateFormat('yyyy-mm-dd',datas.planInfo?.expireTime) }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="规划名称：">
          {{ datas.planDetail?.planName }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="创建人：">
          {{ datas.planDetail?.creatorName }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="创建时间：">
          {{ dateFormat('yyyy-mm-dd HH:MM',datas.planDetail?.createdAt) }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="发布时间：">
          <span v-if="datas.planInfo?.putTime">{{ dateFormat('yyyy-mm-dd HH:MM',datas.planInfo?.putTime) }}</span>
          <span v-else>无</span>
        </el-form-item>
      </el-col>

    </el-row>

  </el-form>

  <el-tabs v-model="activeName">
    <el-tab-pane
      v-if="datas.allocationAgent?.id"
      label="开发跟进信息"
      name="signedList"
    >
      <agentView
        :id="datas.planDetail.id"
        :datas="datas"
        :if-have="datas.ifHave"
      />
    </el-tab-pane>
    <el-tab-pane
      label="推荐代理"
      name="fineList"
    >
      <recommendView :datas="datas" />
    </el-tab-pane>
  </el-tabs>

  <!-- 准入详情 -->
  <detail-drawer
    ref="chanceDrawer"
    :size-width="1000"
    custom-title
  >
    <template #title>
      <span>关联市场准入 - {{ datas?.planInfo?.chanceName }}</span>
    </template>
    <template #contents>

      <chance-info :id="datas?.planInfo.chanceId" />

    </template>
  </detail-drawer>

</template>

<script>
import {
  defineAsyncComponent,
  defineComponent,
  reactive,
  toRefs,
  watch,
} from 'vue'

export default defineComponent({
  name: 'SignedDetail',
  components: {
    agentView: defineAsyncComponent(() => import('./agentView.vue')),
    recommendView: defineAsyncComponent(() => import('./recommendView.vue')),
    chanceInfo: defineAsyncComponent(() =>
      import('@CRM/views/commonView/detailComponents/business/chanceInfo.vue')
    ),
  },
  props: {
    datas: {
      type: Object,
      default: {},
    },
  },
  setup(props, {}) {
    var data = reactive({
      activeName: 'fineList',
      chanceDrawer: null,
    })

    const toChance = () => {
      data.chanceDrawer.open()
    }

    watch(
      () => props.datas,
      (newval, oldval) => {
        if (newval && newval.allocationAgent && newval.allocationAgent.id) {
          data.activeName = 'signedList'
        }
      },
      { immediate: true, deep: true }
    )

    return {
      ...toRefs(data),
      toChance,
    }
  },
})
</script>

<style scoped>
</style>
